<!-- setup Vue 提供的语法糖，定义 UI 中即可使用 -->
<script setup lang="ts">
import { ref } from 'vue';


const food = ref('🐔')

const changeFood = () => {
  food.value = `🏀🐔💃🏻`
}

const eatFood = (food: string) => {
  alert(food+'好好吃~~再来一份')
}

const testEvent = (e:any,info:string) => {
  console.log(e)
  console.log(info)
}

</script>

<!-- 结构 -->
<template>
  <!-- 内联语句 -->
  <!-- <h2 v-on:click="food+='🏀'">內联语句-直接写逻辑语句：{{ food }}</h2> -->
  <h2 @click="food+='💃🏻'">內联语句-直接写逻辑语句：{{ food }}</h2>

  <!-- 处理函数 -->
   <h2 @click="changeFood">处理函数-适合写一些复杂的逻辑</h2>

   <!-- 调用函数+传递参数 -->
    <h2>吃东西</h2>
    <button @click="eatFood('隆江猪脚饭')">吃猪脚饭</button>
    <button @click="eatFood('祖传一品隆江猪脚饭')">吃祖传一品隆江猪脚饭</button>

  <!-- 默认的事件参数 -->
   <!-- 事件触发时，浏览器会默认传递一个 【事件参数】给函数，内部有很多信息
        触发事件时，如果既要获取默认的时间参数，又要 传递自定义的参数
        可以使用 $event 替代默认的参数
   -->
   <button @click="testEvent($event,'翻滚吧牛宝宝')">测试事件参数</button>

</template>


<!-- 样式 -->
<style scoped>
  img{
    width: 200px;
    height: 200px;
  }
</style>